<template>
    <div class="photolist">
        <!-- 顶部分类区域 -->
        <div id="slider" class="mui-slider">
            <div
                id="sliderSegmentedControl"
                class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
            >
                <div class="mui-scroll">
                    <a
                        :class="'mui-control-item' + (index == activeIndex ? ' mui-active' : '')"
                        v-for="(item, index) in categoryList"
                        :key="index"
                        href="#"
                        >{{ item.title }}</a
                    >
                </div>
            </div>
        </div>
        <!-- 图片区域 -->
        <ul class="img-list">
            <router-link :to="'/home/photolist/photoinfo/' + index" tag="li" class="img-item" v-for="(item, index) in imgList" :key="index">
                <img v-lazy="item" />
                <div class="info">
                    <h1 class="info-title">川菜呀川菜呀</h1>
                    <div class="info-body">川菜是中国汉族传统的四大菜系之一、中国八大菜系之一、中华料理集大成者。川菜三派的划分，是在已有定论的上河帮、小河帮、下河帮的基础上，规范化完整表述为：</div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
import mui from '../../lib/js/mui.min.js';

export default {
    name: 'photolist',
    data() {
        return {
            categoryList: [
                { title: '全部', id: 0 },
                { title: '新闻', id: 1 },
                { title: '娱乐', id: 2 },
                { title: '体育', id: 3 },
                { title: '游戏', id: 4 },
                { title: '生活', id: 5 },
                { title: '购物', id: 6 },
                { title: '军事', id: 7 },
                { title: '天气', id: 8 },
            ],
            imgList: [
                'http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg',
                'http://fuss10.elemecdn.com/3/1e/42634e29812e6594c98a89e922c60jpeg.jpeg',
                'http://fuss10.elemecdn.com/1/c5/95c37272d3e554317dcec1e17a9f5jpeg.jpeg',
                'http://fuss10.elemecdn.com/7/85/e478e4b26af74f4539c79f31fde80jpeg.jpeg',
                'http://fuss10.elemecdn.com/b/df/b630636b444346e38cef6c59f6457jpeg.jpeg'
            ],
            activeIndex: 0,
        };
    },
    mounted() {
        // 一进来加载分类为全部的图片
        this.getCategoryList();
        this.initScroll();
    },
    methods: {
        initScroll() {
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        },
        getCategoryList() {
            //TODO 通过后端获取分类
            this.categoryList = [
                { title: '全部', id: 0 },
                { title: '新闻', id: 1 },
                { title: '娱乐', id: 2 },
                { title: '体育', id: 3 },
                { title: '游戏', id: 4 },
                { title: '生活', id: 5 },
                { title: '购物', id: 6 },
                { title: '军事', id: 7 },
                { title: '天气', id: 8 },
            ];
        },
        getPhotoListByCateId(cateId = 0){
            //TODO 根据Id获取图片列表
            this.imgList = ['./img/swiper1.jpeg', './img/swiper2.jpeg', './img/swiper3.jpeg','./img/swiper1.jpeg', './img/swiper2.jpeg', './img/swiper3.jpeg']
        }
    },
};
</script>

<style lang="less">
.photolist {
    padding-bottom: 40px;
    .mui-scroll-wrapper {
        .mui-control-item {
            padding: 0 15px;
        }
    }
    .img-list{
        padding: 0;
        .img-item{
            width: 100%;
            margin: 4px;
            overflow: hidden;
            list-style-type: none;
            text-align: center;
            box-sizing: content-box;
            background-color: #ccc;
            box-shadow: 0 0 9px #ccc;
            position: relative;
            img{
                width: 100%;
                vertical-align: middle;
            }
            img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
            }
            .info{
                color:#fff;
                position: absolute;
                bottom: 0px;
                text-align: left;
                background-color: rgba(0,0,0,0.3);
                max-height: 84px;
                .info-title{
                    font-size: 14px;
                }
                .info-body{
                    font-size: 13px;
                }
            }
        }
    }
}


</style>>